<template>
  <section class="tab-container">
    <table cellspacing="0" cellpadding="0" border="0" class="table-container el-table table-info">
      <thead>
        <tr>
          <th colspan="3">
            <el-row type="flex" justify="space-between" class="button-box">
              <el-col :span="14" class="left">
                产品基本信息
              </el-col>
            </el-row>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>产品: {{form.name}}</td>
          <td>节点类型: {{form.nodeType | nodeTypeFilter}}</td>
          <td>设备数: {{form.deviceCount}}</td>
        </tr>
        <tr>
          <td>ProductKey: {{form.key}}</td>
          <td>ProductSecret: {{form.secret}}</td>
          <td>创建时间: {{form.crtime | crtimeFilter}}</td>
        </tr>
      </tbody>
    </table>
  </section>
</template>

<script>
  import { getProductDetail } from '@api/product'
  import { Vue, Component, Watch } from 'vue-property-decorator'

  @Component({
    filters: {
      nodeTypeFilter(nodeType) { //节点类型格式转化
        const nodeTypeMap = {
          0: '设备',
          1: '网关'
        }
        return nodeTypeMap[nodeType];
      },
      crtimeFilter(crtime) { //时间类型格式转化
        let d = new Date(crtime);
        let times = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds();

        return times;
      }
    }
  })
  export default class ProductInfo extends Vue {
    data() {
      return {
        id: -1, //产品id
        form: {} //form表单对象
      }
    }
    mounted() {
      this.id = this.$route.params.id;
      this.fetchData(this.id);
    }
    fetchData(id) {
      getProductDetail(id).then(response => {
        let res = response.data;
        if (res.status) {
          this.form = res.data;
        } else {
          this.showMessage(res.message, 'error');
        }
      })
    }
    showMessage(message, type, duration) { //提示信息共用方法
      this.$message({
        message: message,
        type: type || 'success', //success warning error
        duration: duration || 3 * 1000
      })
    }
  }
</script>

<style lang="scss" scoped>
  @import '~@scss/theme/table.scss';
</style>
